<template>
<div class="lay1">
  <div class="lay1_a"><img src="../assets/maoyandy.png"></div>
  <div class="lay1_b">
    <div class="lay1_a1"><img class="img1" src="../assets/maoyandl.png"></div>
    <div class="lay1_a2">
      <div class="fd">
        账号登陆
      </div>
        <form>
          <div class="fd1">
            <input type="text" v-model="formdata.name" placeholder="账号">
          </div>
          <div class="fd2">
            <input type="password" v-model="formdata.pass" placeholder="密码">
          </div>
          <div>
            <button type="submit" class="btn1" @click="login(formdata)">登录</button>
          </div>
        </form>
        <div class="layzc">
          还没有账号？<router-link to="regist">免费注册</router-link>
        </div>
    </div>
  </div>
  <div class="lay1_c">©2020 美团网团购 meituan.com 京ICP证070791号 京公网安备11010502025545号</div>
</div>
</template>

<script>
import VueCookies from 'vue-cookies'
import axios from "axios"
export default {
  name: 'HelloWorld',
  data () {
    return {
      formdata:{
        name:'',
        pass:''
      },
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    login: function(data){
      axios.get("api/user/login?uname="+data.name+"&upass="+data.pass).then(res=>{
        console.log(res)
        alert(res.data.code)
        if(res.data.code==="1"){
          alert(res.data.data.uname)
           this.$router.push({name:'show',params:{uname:res.data.data.uname}})
        }else{
         alert("输入信息有误请重新输入")
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.lay1 {
  /* border: 1px solid red; */
  width: 800px;
  height: 500px;
  margin: auto;
}
.lay1_a {
  height: 80px;
  width: 100px;
}
.lay1_b {
  height: 340px;
  /* background-color: skyblue; */
}
.lay1_c {
  margin-top: 60px;
  color: gray;
}
.lay1_a1{
  width: 399px;
  height: 340px;
  /* background-color: skyblue; */
  float: left;
}
.img1 {
  width: 380px;
  height: 335px;
  margin: auto;
}
.lay1_a2 {
   width: 399px;
   height: 340px;
   /* background-color:red; */
   float: right;
}
.fd {
  margin-top: 65px;
  margin-left: -112px;
}
.fd1 {
  margin-top: 10px;
}
.fd2 {
  margin-top: 10px;
}
.btn1 {
  margin-top: 30px;
  width: 179px;
  height: 30px;
  background-color: red;
  border: none;
  color: white;
}
.layzc {
  margin-left: -40px;
}
</style>
